
<!--<Primeng-TurboTable-Start>-->

<div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
    <p-table #dataTable 
             [value]="primengTableHelper.records"
             rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
             [paginator]="false"
             [lazy]="true"
             [responsive]="primengTableHelper.isResponsive" 
             [resizableColumns]="primengTableHelper.resizableColumns"
             [(selection)]="selectedDatas"
             dataKey="id" 
             selectionMode="multiple">
        <ng-template pTemplate="header">
            <tr>
                <th style="width:38px">
                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                </th>
                <th style="width: 110px" >
                 {{'Actions' | localize}}
                </th>
                <th [ngStyle]="{'width': config.width + 'px' }" *ngFor="let config of listConfig">
                    {{config.displayName | localize}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-record="$implicit">
            <tr >
                <td style="width: 38px">
                    <p-tableCheckbox [value]="record" (click)="$event.stopPropagation()"></p-tableCheckbox>
                </td>
                <td style="width: 110px">
                <div class="btn-group" dropdown placement="bottom left" container="body">
                    <button id="dropdownButton" type="button" class="btn btn-primary btn-xs2 blue dropdown-toggle" dropdownToggle aria-controls="dropdownMenu">
                        <i class="fa fa-cog"></i><span class="caret"></span>
                        {{"Actions" | localize}}
                    </button>
                    <ul id="dropdownMenu" class="dropdown-menu" role="menu" *dropdownMenu aria-labelledby="dropdownButton">
                        <li *ngIf="isSourceData(record)" role="menuitem">
                            <a href="javascript:;" class="dropdown-item"
                               (click)="shareToOtherMenu(record)">{{'ShareToOtherMenu' | localize}}</a>
                        </li>
                        <li *ngIf="isSourceData(record)" role="menuitem">
                            <a href="javascript:;" class="dropdown-item"
                               (click)="moveToAnotherMenu(record)">{{'MoveToAnotherMenu' | localize}}</a>
                        </li>
                        <li *ngIf="isSourceData(record)" role="menuitem">
                            <a href="javascript:;" class="dropdown-item"
                               (click)="copyToOtherMenu(record)">{{'Copy' | localize}}</a>
                        </li>
                        <li *ngIf="record.menuCount > 1" role="menuitem">
                            <a href="javascript:;" class="dropdown-item"
                               (click)="lookUpSharedList(record)">{{'LookUpSharedList' | localize}}</a>
                        </li>
                    </ul>
                </div>
                </td>
                <ng-container *ngFor="let config of listConfig">
                    <td [ngStyle]="{'width': config.width + 'px' }" *ngIf="config.fieldName !== 'order'">
                        <span class="p-column-title"> {{config.displayName | localize}}</span>

                        <span *ngIf="config.fieldName === 'menuId'"> {{record.menuId | menuItemName}}</span>
                        <span *ngIf="config.fieldName === 'title'">
                            <a href="javascript:void(0)" (click)="editModal.emit(record)" title="{{record.title}}" [innerHTML]="getFormatTitle(record)| trustAs :'html'"></a>
                        </span>
                        <span *ngIf="!config.fieldName">
                            <a href="javascript:void(0)" (click)="goRelate(record, config)"  *ngIf="!config.actionFuncName && !config.renderFuncName">
                                {{'LookOver' | localize}}
                            </a>
                            <a href="javascript:void(0)" (click)="exDiyFunc(record, config.actionFuncName, config.fieldName)" *ngIf="config.actionFuncName">
                                {{'LookOver' | localize}}
                            </a>
                            <span href="javascript:void(0)" *ngIf="config.renderFuncName">
                                {{ getDiyFuncResult(record, config.renderFuncName, config.fieldName)}}
                            </span>
                        </span>
                        <span class="label label-success label-inline" *ngIf="config.fieldName && config.isBooleanType && record[config.fieldName]">
                            {{'Yes' | localize}}
                        </span>
                        <span class="label label-dark label-inline" *ngIf="config.fieldName && config.isBooleanType && !record[config.fieldName]">
                            {{'No' | localize}}
                        </span>
                        <span *ngIf="config.fieldName && config.isDateTimeType">
                            {{record[config.fieldName]|timestampFormat: config.format}}
                        </span>
                        <span *ngIf="config.renderFuncName && config.fieldName && config.fieldName !== 'menuId' && config.fieldName !== 'title' && !config.isBooleanType && !config.isDateTimeType">
                            {{ getDiyFuncResult(record, config.renderFuncName, config.fieldName)}}
                        </span>
                        <span *ngIf="!config.renderFuncName && config.fieldName && config.fieldName !== 'menuId' && config.fieldName !== 'title' && !config.isBooleanType && !config.isDateTimeType">
                            {{record[config.fieldName]}}
                        </span>
                    </td>
                    <td pEditableColumn [ngStyle]="{'width': config.width + 'px' }" *ngIf="config.fieldName === 'order'">
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText [ngStyle]="{'width': (config.width -10) + 'px' }" type="text" [(ngModel)]="record.order" (change)="changeOrder($event,record)">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{record.order}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                </ng-container>
            </tr>
        </ng-template>
    </p-table>
    <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
        {{'NoData' | localize}}
    </div>
    <div class="primeng-paging-container">
        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                     #paginator
                     (onPageChange)="getList($event)"
                     [totalRecords]="primengTableHelper.totalRecordsCount"
                     [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                     [showCurrentPageReport]="true"
                     [currentPageReportTemplate]="'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount">
        </p-paginator>
    </div>
</div>
<!--<Primeng-TurboTable-End>-->
